<template>
  <div class='assemble-page'>
    <div v-for="(item,index) in assembleList" :key="index">
      <router-link class="assemble-item" :to="'/goods/skDetail?id=' + item.productSkuId">
        <img class="assemble-item-image" :src="item.picUrl"/>
        <div class="assemble-item-info">
          <div class="assemble-name">{{item.productName}}</div>
          <div class="assemble-bottom">
            <div class="assemble-left">
              <div class="assemble-fee">￥{{item.productPrice}}</div>
              <div class="assemble-real-fee">
                <div class="icon">￥</div>
                {{item.productPromotePrice}}
              </div>
            </div>
            <div class="assemble-right">
              <div v-if="item.state == '0'" class="assemble-time">
                倒计时{{item.time}}
              </div>
              <div :class="['assemble-state',(item.state != '0'?'margin-bottom-40':''),(item.state == '2' || item.state =='3'?'color-gray':'',(item.state == '1'?'color-orange':''))]">
                {{item.stateName}}
              </div>
            </div>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { API } from '../../config'

export default {
  name: 'assemble',
  data () {
    return {
        assembleList:[],
        pageNum:1
    }
  },
  methods:{
      initFun(pageNum) {
        let vm = this
        let params
        params = pageNum ? pageNum : vm.pageNum
        vm.assembleList = params === 1 ? [] : vm.assembleList
        vm.$axios.get(API + '/product/selSecondBuy/' + params + '/20').then((res) => {
          if (res.data.code === 200) {
            vm.assembleList = [...vm.assembleList, ...res.data.data.data]
            vm.assembleList.forEach(item => {
                item.time = ''
                if (item.secondBuyStatus === 'BEFOURBEGIN') {
                item.state = '0'
                item.stateName = '即将开始'
                item.time = vm.hourMinSec(new Date(item.msStartTime.replace(/-/g, '/')).getTime())
                } else if (item.secondBuyStatus === 'INPROGRESS') {
                item.state = '1'
                item.stateName = '马上抢'
                } else if (item.secondBuyStatus === 'COMPLETED') {
                item.state = '2'
                item.stateName = '已抢光'
                } else if (item.secondBuyStatus === 'FINISH') {
                item.state = '3'
                item.stateName = '活动结束'
                }
            })
            vm.changeTime()
          } else {
            vm.$message(res.data.msg)
          }
          vm.modalStatus = false
        })
    },
    changeTime() {
    // todo this.assembleList undefined 问题
        let vm = this
        setInterval(function() {
          vm.assembleList.forEach(item => {
            if (item.secondBuyStatus === 'BEFOURBEGIN') {
                item.time = vm.hourMinSec(new Date(item.msStartTime.replace(/-/g, '/')).getTime())
            }
        })}, 1000)
    },
    hourMinSec(time) {
        const start = new Date().getTime()
        const end = time
        if (end > start) {
        let date = parseInt(start)
        let until = parseInt(end)
        let days = Math.abs(until - date) / 1000 / 3600 / 24
        let day = Math.floor(days)
        let hours = (days - day) * 24
        let hour = Math.floor(hours)
        let minutes = (hours - hour) * 60
        let minute = Math.floor(minutes)
        let seconds = (minutes - minute) * 60
        let second = Math.floor(seconds)
        var timeString = '0秒'
        if (second) {
            timeString = second + '秒'
        }
        if (minute) {
            timeString = minute + '分' + timeString
        }
        if (hour || day) {
            let hourNum = hour ? hour : 0
            let dayNum = day ? day : 0
            timeString = (hourNum + dayNum * 24) + '时' + timeString
        }
        return timeString
        }
    }
  },
  mounted(){
    let vm = this
    vm.initFun()
  }
}
</script>

<style lang='less' scoped>
@import '../../css/common.less';
@import '../../css/assemble.less';
</style>